import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Tools, WhiteSpace, Icon} from 'weaver-mobile';
import classnames from 'classnames';
import moment from 'moment';
const getLabel = Tools.getLabel;

@observer
export default class SignBtn extends Component{
    constructor(props){
        super(props);
        this.state = {
            currTime: null,
            showBtn: false
        }
    }

    componentDidMount(){
        this.monitor();
        const {data} = this.props;
        if(data.needSign === '1'){
            this.setState({
                showBtn: true
            });
        }
    }

    monitor = () => {
        this.timer != null && clearInterval(this.timer);
        this.timer = setInterval(() => {
            const {store: {currTime}} = this.props;
            this.setState({currTime});

            // if(this.checkOutsideSign() || this.checkShowBtn()){
            //     this.setState({
            //         showBtn: true
            //     });
            // }else{
            //     this.setState({
            //         showBtn: false
            //     });
            //     this.props.store.cleanMonitor();
            // }
        }, 1000);
    }

    componentWillUnmount = () => {
        this.timer != null && clearInterval(this.timer);
        // this.props.store.cleanMonitor();
    }

    checkOutsideSign = () => {
        const {store: {toJS, outButtonsInfo, switchStatus}} = this.props;
        const {status, outsidesign} = toJS(outButtonsInfo);
        const outside = (!status && outsidesign == '1');
        return switchStatus && outside;
    }

    checkShowBtn = () => {
        let showBtn = false;
        const {data: {canSignTime, date, type, signAcross}} = this.props;
        if(canSignTime == null || canSignTime == '')//自由班制或未设置打卡区间
            showBtn = true;
        else{
            let m = moment(`${date} ${canSignTime}`, 'YYYY-MM-DD HH:mm:ss');
            if(type === 'on'){
                m.add(-1 * signAcross, 'd');
                showBtn = !moment().isBefore(m);
            }else{
                m.add(signAcross, 'd');
                showBtn = moment().isBefore(m);
            }
        }
        return showBtn;
    }

    render(){
        const {store: {toJS, currTime: c, locationAndWifiInfo, outButtonsInfo, relocate, callSign, switchStatus, complate}, data, redirectToOutsideSign} = this.props;
        const currTime = this.state.currTime || c;
        const {locationInfo, wifiInfo} = locationAndWifiInfo;
        const {status, positionObj, wifiObj, checkRs, iconProps, faildKey} = toJS(outButtonsInfo);
        const outside = this.checkOutsideSign();
        const signBtnClassName = classnames({
            btn: true,
            ['btn-abnormal']: data.isYellow === '1',
            ['btn-outside']: outside
        });

        let btnLbl = getLabel('500502','打卡');
        if(outside)
            btnLbl = getLabel('500503','外勤打卡');

        return (
            <div className='signPanel'>
                <WhiteSpace size='xl'/>
                {
                    this.state.showBtn && complate &&
                    <div className={signBtnClassName} onClick={() => callSign(data, redirectToOutsideSign)}>
                        <div className='lbl'>{btnLbl}</div>
                        <div className='time'>{currTime.format("HH:mm:ss")}</div>
                    </div>
                }
                <WhiteSpace size='md'/>
                {
                    switchStatus &&
                    <div className='msg'> 
                        <div>
                            <div className='checkInfo'>
                                <div className='checkInfoIcon'><Icon className='icon' {...iconProps} /></div>
                                <div className='checkInfoDetail text-elli'>{checkRs}</div>
                            </div>
                            <div className='relocation text-elli' onClick={() => redirectToOutsideSign({store: this.props.store, data})}>{getLabel('504546','查看考勤范围')}</div>
                        </div>
                    </div>
                }
            </div>
        )
    }
}